<template>
  <div class="layout-wrapper layout-witness">
    <div class="layout-header layout-search">
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-input
            v-model.trim="searchForm.keyword"
            class="ui-w210"
            placeholder="预警点名称"
            @keyup.native.enter="handleSearch()"
          >
            <el-button slot="append" type="primary" icon="icon-sousuo" @click="handleSearch()" />
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addDate()"> 新增 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="layout-body">
      <el-table ref="taskTable" v-loading="tableLoading" :data="tableData" height="100%" stripe>
        <el-table-column type="index" align="left" label="序号" width="50">
          <template slot-scope="scope">
            {{ pageObj.currentPage * pageObj.pageSize + 1 + scope.$index }}
          </template>
        </el-table-column>
        <el-table-column prop="warningname" label="预警点名称"/>
        <el-table-column prop="warningvalue" label="预警阀值" width="130"/>
        <el-table-column label="阀值单位" width="130">
          <template v-slot="{row}">
            <span v-if="row.unit">{{row.unit}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="jdname" label="所处阶段" width="130"/>
        <el-table-column label="状态" width="130">
          <template v-slot="{row}">
            <span v-if="row.state == '1'">正常</span>
            <span v-else>停用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" header-align="center" width="100">
          <template slot-scope="scope">
<!--            <el-button type="text" size="default" @click="viewData(scope.row)"> 详情 </el-button>-->
            <el-button type="text" size="default" @click="updateDate(scope.row)"> 修改 </el-button>
            <el-button type="text" size="default" @click="deleteData(scope.row.id)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="layout-footer">
      <wpagination
        v-if="pageObj.total > pageObj.pageSizes[0]"
        :total="pageObj.total"
        :page.sync="pageObj.currentPage"
        :limit.sync="pageObj.pageSize"
        :pageSizes="pageObj.pageSizes"
        @pagination="projectListFn()"
      />
    </div>
    <el-dialog
      width="60%"
      :close-on-click-modal="false"
      draggable
      :show-close="false"
      title="预警点设置信息"
      :visible.sync="editTempl"
    >
      <div>
        <el-form ref="templForm" :model="templForm" :rules="templRules" label-width="auto" grid size="normal">
          <el-form-item label="预警点名称" prop="warningname" :span="24">
            <el-input
              v-model="templForm.warningname"
              placeholder="请输入预警点名称"
              :disabled="childType == 'view' ? true : false"
            />
          </el-form-item>
          <el-form-item label="所处阶段" prop="jdcode" :span="24">
            <el-select
              v-model="templForm.jdcode"
              style="width: 100%"
              filterable
            >
              <!-- @change="typeChange" -->
              <el-option v-for="(value, key) in jdlist" :key="key" :label="value" :value="key" />
            </el-select>
          </el-form-item>
          <el-form-item label="预警阀值" prop="warningvalue" :span="12">
            <el-input
              v-model="templForm.warningvalue"
              placeholder="请输入预警阀值"
              :disabled="childType == 'view' ? true : false"
            />
          </el-form-item>
          <el-form-item label="阈值单位" prop="unit" :span="12">
            <el-input
              v-model="templForm.unit"
              placeholder="请输入阈值单位"
              :disabled="childType == 'view' ? true : false"
            />
          </el-form-item>
          <el-form-item label="预警点编码" prop="warncode" :span="12">
            <el-input
              v-model="templForm.warncode"
              placeholder="请输入预警点编码"
              :disabled="childType == 'view' ? true : false"
            />
          </el-form-item>
          <el-form-item label="状态" prop="state" :span="12">
            <el-radio-group v-model="templForm.state">
              <el-radio label="1">正常</el-radio>
              <el-radio label="0">异常</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="childType != 'view'" :loading="btnLoading" type="primary" @click="submitData('templForm')"
        >确定</el-button
        >
        <el-button @click="cancel('templForm')">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="预警点设置信息" :visible.sync="warninginfo.show" width="60%">
      <el-descriptions title="" :column="2" border>
        <el-descriptions-item label="预警点名称" :span="2">{{warninginfo.warning.warningname}}</el-descriptions-item>
        <el-descriptions-item label="预警阀值">{{warninginfo.warning.warningvalue}}</el-descriptions-item>
        <el-descriptions-item label="所处阶段">{{warninginfo.warning.jdname}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>
<script>
  import { list,templAdd,deleteWarning } from "../../../../../api/weeon/warning/warning";
  import {templDelete} from "@/api/weeon/task/gly/pszj";
  export default {
    data() {
      // 这里存放数据
      return {
        childType: "",
        editTempl: false,
        btnLoading: false,
        tableData: [],
        warninginfo: {show: false,warning: {}},
        tableLoading: false,
        pageObj: {
          total: 0,
          currentPage: 0,
          pageSize: 10,
          pageSizes: [10, 20, 30]
        },
        searchForm: {
          keyword: ""
        },
        jdlist:[],
        templForm: {
          warncode:"",
          warningname:"",
          warningvalue:"",
          jdcode:"",
          unit:"",
          state:""
        },
        templRules: {
          warncode: [{ required: true, message: "请输入预警点编码", trigger: "blur" }],
          warningname: [{ required: true, message: "请输入预警点名称", trigger: "blur" }],
          warningvalue: [{ required: true, message: "请输入预警阀值", trigger: "blur" }],
          jdcode: [{ required: true, message: "请选择所处阶段", trigger: "blur" }],
          state: [{ required: true, message: "请选择状态", trigger: "blur" }]
        }
      };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.projectListFn();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    // 生命周期 - 销毁之前
    beforeDestroy() {},
    // 生命周期 - 销毁完成
    destroyed() {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
    methods: {
      deleteData(id){
        this.$confirm("确定删除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.deleteUser(id);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
              single: true
            });
          });
      },
      async deleteUser(id){
        try {
          this.tableLoading = true;
          const res = await deleteWarning({id: id});
          this.tableLoading = false;
          if (res.stat === 1) {
            this.$message({
              type: "success",
              message: "操作成功",
              single: true
            });
            this.projectListFn();
          } else {
            this.$message({
              type: "error",
              message: res.msg || "操作失败",
              single: true
            });
          }
        } catch (error) {
          console.error(error);
          this.tableLoading = false;
        }
      },
      //取消
      cancel(formName) {
        this.editTempl = false;
        this.childType = "";
        this.tableLoading = false;
        this.btnLoading = false;
        this.templForm ={};
        this.$refs[formName].resetFields();
        this.projectListFn();
        // this.roomDeviceShow = false;
      },
      updateDate(row) {
        this.editTempl = true;
        this.templForm = row;
        this.childType = "edit";
      },
      //保存修改
      submitData(formName) {
        let this_ = this;
        try {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.doAdd();
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        } catch (error) {
          console.error(error);
          this.$message({
            type: "warning",
            message: "保存数据失败，稍后再试"
          });
        }
      },
      //保存
      async doAdd() {
        this.btnLoading = true;
        const res = await templAdd(this.templForm);
        if (res.stat === 1) {
          this.$message({
            type: "success",
            message: "保存成功",
            single: true
          });
        } else {
          this.$message({
            type: "warning",
            message: res.msg,
            single: true
          });
        }
        this.btnLoading = false;
        this.editTempl = false;
        this.childType = "";
        this.$refs.templForm.resetFields(); //清空对象
        this.projectListFn(); //刷新列表
      },
      //新增操作
      addDate() {
        this.editTempl = true;
        this.childType = "edit";
      },
      //修改操作
      /*updateDate(row) {
        this.editTempl = true;
        this.templForm = row;
        this.childType = "edit";
      },*/
      viewData(row){
        this.warninginfo.show = true;
        this.warninginfo.warning = row;
      },

      // 数据列表
      async projectListFn() {
        try {
          this.tableLoading = true;
          this.tableData = [];
          let params = {
            keyword: this.searchForm.keyword,
            pageNo: this.pageObj.currentPage,
            pageSize: this.pageObj.pageSize
          };
          const res = await list(params);
          this.tableLoading = false;
          if (res.stat === 1) {
            this.jdlist = res.data.jdlist;
            if (res.data.page.totalElements === 0 && this.pageObj.currentPage !== 0) {
              this.pageObj.currentPage = 0;
              this.$nextTick(() => {
                this.projectListFn();
              });
              return;
            }
            this.tableData = res.data.page.content;
            this.pageObj.total = res.data.page.totalElements;
          } else {
            this.$message({
              type: "error",
              message: res.msg || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          console.log(error);
          this.tableLoading = false;
        }
      },
      handleSearch() {
        this.pageObj.total = 0;
        this.pageObj.currentPage = 0;
        this.projectListFn();
      },
      //人员信息管理
      // userManager(row) {
      //   let bdguid = row[0].bdguid;
      //   this.$router.push({ path: "/jdry", query: { bdguid } });
      // }
    }
  }
</script>
<style lang="scss" scoped>
  .status-list {
    padding-top: 18px;
    span {
      padding-left: 20px;
      font-size: 12px;
      &::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 5px;
        margin-top: -2px;
      }
    }
    .completed::before {
      background-color: #56b502;
    }
    .inWitness::before {
      background-color: #1890ff;
    }
    .notStarted::before {
      background-color: #b2b2b2;
    }
  }
  ::v-deep.progress-list {
    .el-step {
      height: 26px;
      line-height: 26px;
      &::before {
        border-width: 13px;
      }
      &::after {
        border-width: 13px;
        right: -26px;
      }
      .cell {
        padding: 0 6px;
      }
      .el-step__title {
        line-height: 26px;
        text-align: center;
        i {
          color: #fc9306;
          // background-color: #fff;
        }
      }
    }
    // 已完成状态
    .status-completed {
      cursor: pointer;
      background: rgba(86, 181, 2, 0.2);
      &::after {
        border-left-color: rgba(86, 181, 2, 0.2);
      }
      .el-step__title {
        color: #56b502;
      }
    }
    .status-completed:hover {
      background: rgba(86, 181, 2);
      &::after {
        border-left-color: rgba(86, 181, 2);
      }
      .el-step__title {
        color: #fff;
      }
    }
    // 见证中状态
    .status-inWitness {
      cursor: pointer;
      background: rgba(24, 144, 255, 0.2);
      &::after {
        border-left-color: rgba(24, 144, 255, 0.2);
      }
      .el-step__title {
        color: #1890ff;
      }
    }
    .status-inWitness:hover {
      background: rgba(24, 144, 255);
      &::after {
        border-left-color: rgba(24, 144, 255);
      }
      .el-step__title {
        color: #fff;
      }
    }
    // 未开始状态
    .status-notStarted {
      background: rgba(153, 153, 153, 0.2);
      &::after {
        border-left-color: rgba(153, 153, 153, 0.2);
      }
    }
  }
</style>
